<template>
    <div id="type">
        <!-- 搜索组件 -->
        <wgysearch @getSearch='getSearch'></wgysearch>
        <!-- 下面的 -->
        <div class="views">
            <!-- 左侧tab -->
            <wgyleftTab @clickType='getIndex'></wgyleftTab>
            <!-- 右侧视图 -->
            <div class="views-right">
                <!-- 小轮播图 -->
                <wgyAloneSwiper autoplay ></wgyAloneSwiper>
                <!-- 所有分类 -->
                <wgyalltype :allType='allType'></wgyalltype>
               
            </div>
        </div>
    </div>
</template>

<script>
import { getTypeList } from '../../utils/api/Type'
import wgysearch from '@/components/type/wgy-search/wgy-search'
import wgyleftTab from '@/components/type/wgy-left-Tab/wgy-left-Tab'
import wgyAloneSwiper from '@/components/type/wgy-Alone-Swiper/wgy-Alone-Swiper'
import wgyalltype from '@/components/type/wgy-AllType/wgy-AllType'
export default {
    name: 'index',
    data() {
        return {
            allType:[],
            allTypeCopy:[],
            allTypeCopy1:[],
            allTypeCopy2:[],
        };
    },
    created() {
        // 请求所有分类的数据
        getTypeList().then(res => {
            console.log(res.data.data)
            this.allType = res.data.data
            // 复制的
            this.allTypeCopy = JSON.parse(JSON.stringify(res.data.data))
            this.allTypeCopy1 = JSON.parse(JSON.stringify(res.data.data))
            this.allTypeCopy2 = JSON.parse(JSON.stringify(res.data.data))
            this.all = this.allTypeCopy1.splice(0,this.allTypeCopy1.length)
            // 居家
            this.jujia  = this.allTypeCopy.splice(0,7)
            // 配件服饰
            this.peijian = this.allTypeCopy.splice(0,7)
             // 服饰
            this.fushi = this.allTypeCopy.splice(0,7)
             // 电器
            this.dianqi = this.allTypeCopy.splice(0,6)
        })
    },
    methods: {
        // 点击左侧tab.显示对应内容
        getIndex(a) {
            if(a === 0){
                this.allType = this.all
            } else if(a === 1){
                this.allType = this.jujia
            } else if(a ===2) {
                this.allType = this.peijian
            } else if(a===3){
                this.allType = this.fushi
            } else if(a===4) {
                this.allType = this.dianqi
            }
        },
        // 得到点击结果
        getSearch(value) {
           this.allType = this.allTypeCopy2.filter(item => {
                return item.name.includes(value)
            });
        }
    },
    //组件挂载
    components: {
        wgysearch,
        wgyleftTab,
        wgyAloneSwiper,
        wgyalltype,
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#type{
    background-color: #fff;
}
.views{
    width: 100%;
    display: flex;
    .wgyleftTab{
        width: 2rem;
    }
    .views-right{
        width: 5.5rem;
        height: 11.6rem;
        overflow: hidden;
        background-color: #fff;
        border-left: 1px solid #ccc;
        overflow-y: auto;
    }

}


</style>
